<template>
    <div class="el-search-up">
        <el-input v-model="searchQuery" size="large" placeholder="请输入商品名" clearable @clear="handleClear"
            @keyup.enter="handleEnterPress">
            <template #prepend>
                <el-button :icon="Camera" @click="centerDialogVisible = true" class="el-search-button"
                    style="background-color: #5CAF90; color: white;" title="智能识图" />
            </template>
            <template #append>
                <el-button :icon="Search" @click="handleEnterPress" class="el-search-button"
                    style="background-color: #5CAF90; color: white;" title="搜索" />
            </template>
        </el-input>
    </div>

    <!-- 智能识图 -->
    <el-dialog v-model="centerDialogVisible" title="智能识图" width="800" :close-on-click-modal="false" center>
        <h1>实验功能，暂未开放</h1>
        <div>
            <el-upload :action="null" :before-upload="beforeUpload" :file-list="fileList" :auto-upload="false">
                <el-button color='#5CAF90' size="small" plain disabled="true">选取文件</el-button>
            </el-upload>
            <el-button size="small" type="primary" @click="submitUploadClick" disabled="true">上传到服务器</el-button>
        </div>

        <template #footer>
            <div class="dialog-footer">
                <el-button color="red" plain @click="centerDialogVisible = false">
                    关闭
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script lang="ts" setup>
import { ElMessage } from 'element-plus';
import { apiRequest } from '@/api/apiService';
import { AuthService } from '@/api/authService';
import { ref, reactive, defineEmits } from 'vue';
import { Search, Camera } from '@element-plus/icons-vue';


const searchQuery = ref<string>('');                                    // 定义响应式状态
const centerDialogVisible = ref(false);                                 // 智能识图弹框 
const emit = defineEmits(['startSearch']);                              // 定义要触发的自定义事件名称数组
const fileList = reactive<Array<{ name: string; raw: File }>>([]);      // 注意文件对象的类型

// 清空搜索框
const handleClear = () => {
    searchQuery.value = '';
};

// 确认搜索
const handleEnterPress = () => {
    emit('startSearch', searchQuery.value);
}

// 上传前的钩子函数
const beforeUpload = (file: File) => {
    // 在这里你可以做一些文件检查
    // 文件格式校验
    return true; // 返回 false 会停止上传
};

// 手动点击上传
const submitUploadClick = () => {
    submitUpload();
}

// 发起文件上传请求
const submitUpload = async () => {
    try {
        const url = '/upload/picture';
        const formData = new FormData();
        fileList.forEach(file => {
            formData.append('files', file.raw);
        });
        const customHeaders = { 'Authorization': AuthService.getToken() };
        await apiRequest.uploadRequest<any>(url, fileList[0].raw, formData, customHeaders);
        setTimeout(() => {
            ElMessage({
                message: '上传文件成功',
                type: 'success',
            });
        }, 2000);
    } catch (error) {
        console.log('request: /api/upload/picture failed, error message: ', error);
        setTimeout(() => {
            ElMessage({
                message: '上传文件成功',
                type: 'success',
            });
        }, 2000);
    }
};
</script>

<style scoped>
.el-search-up {
    max-width: 50%;
    width: 50%;
    min-width: 50%;
    margin: 10px auto;
    margin-bottom: 0px;
}

.el-search-button {
    height: 100%;
    width: 80px;
}
</style>